<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active{color:red}
        #box{ width: 150px;height: 150px;border:1px solid red;}
        .drop{
            width: 500px;height: 500px;
            border: 1px solid green;
        }
    </style>
</head>
<body>
  
    <input type="text" id="inp">
    
    <p>文字</p>
    <p>文字2</p>
    <div>good</div>
    <div id="box" draggable="true">box</div>
    <div class="drop" id="con">
        drop
    </div>
    
<script>
/* let timer;
 var inp = document.getElementById("inp");
 inp.addEventListener("keyup",e=>{
    //  console.log(inp.value);
    clearTimeout(timer);
    timer = setTimeout(()=>{
        console.log(inp.value);
    },500)
 }) */

// 延迟触发 
 function debounce(fn,delay=500){
     let timer = null;
     return function(){
         if(timer){clearTimeout(timer)}
         timer = setTimeout(()=>{             
             fn.apply(this,arguments);            
             timer = null;
         },delay)
     }
 }
 function fun(e){
    console.log(inp.value);
    console.log(this)
 }
/*  inp.addEventListener("keyup",debounce((e)=>{
     console.log(inp.value);
     console.log(this);
    
 })) */
 inp.addEventListener("keyup",debounce(fun)) 

//  等待触发

function throttle(fn,delay=100){
    let timer = null;
    return function(){
        if(timer){return};
        timer = setTimeout(()=>{
            fn.apply(this,arguments);
            timer = null;
        },delay)

    }
}
var box = document.getElementById("box");
box.addEventListener('dragstart',function(e){
  
    // console.log(e.offsetX,e.offsetY)
   e.dataTransfer.setData("text", e.target.id);
    console.log(e.dataTransfer);
    // console.log(e.target.id);
},500)

var con = document.getElementById("con");
con.addEventListener("drop",e=>{
    e.preventDefault();
    var id= e.dataTransfer.getData("text");
    var elem = document.getElementById(id);
    console.log(e)
    e.target.appendChild(elem);
    elem.style.position="absolute";
    elem.style.left = e.pageX+"px";
    elem.style.top = e.pageY+"px";
    // console.log(e.target);

})
con.addEventListener("dragover",e=>{e.preventDefault()});

</script>
</body>
</html>

 
